import { TabBar } from 'antd-mobile';
import {routerRedux} from 'dva/router';
import { connect } from 'dva';
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false,
    };
  } 
  toclassify = () =>{
    this.setState({
                selectedTab: 'blueTab',
              });
    const { dispatch } =this.props;
    dispatch(routerRedux.push('classify'))
  }
  toshopping = () =>{
    this.setState({
                selectedTab: 'redTab',
              });
    const { dispatch } =this.props;
    dispatch(routerRedux.push('shopping'))
  }
  tomylist = () =>{
    this.setState({
                selectedTab: 'yellowTab',
              });
    const { dispatch } =this.props;
    dispatch(routerRedux.push('mylist'))
  }
  render() {
    return (
      <div style={{ position: 'fixed', bottom:0 ,width:"100%"}}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="类别"
            key="type"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'blueTab'}
            badge={0}
            onPress={this.toclassify}
            data-seed="logId"
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="购物车"
            key="shopCar"
            badge={8}
            selected={this.state.selectedTab === 'redTab'}
            onPress={this.toshopping}
          >

          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
            selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
            title="我"
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={this.tomylist}
          >
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default connect(({classify }) =>({
  classify,
}))(HomePage)
